<template>
  <div class="abroad">
    <el-input
      v-model="searchWord"
      class="search-input"
      placeholder="请输入搜索内容"
      @keyup.native.enter="refreshList"
    ></el-input>
    <el-button type="primary" @click="refreshList">搜索</el-button>
    <div class="add-row">
      <el-button type="success" @click="showAddDialog = true">新增境外区域</el-button>
    </div>
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="index" label="序号" width="80"></el-table-column>
      <el-table-column prop="code" label="代码" width="100"></el-table-column>
      <el-table-column prop="name" label="名称" width="200"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="info" size="small" @click="clickUpdateBtn(scope.$index, scope.row)">修改</el-button>
          <el-button
            type="danger"
            size="small"
            @click="handleDeleteAbroad(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="changePageNum"
      @prev-click="changePageNum"
      @next-click="changePageNum"
      background
      layout="prev, pager, next"
      :total="pageTotal"
      :page-size="pageSize"
    ></el-pagination>
    <el-dialog class="add-dialog" title="新增境外区域" :visible.sync="showAddDialog" width="30%">
      <div>
        代码：
        <el-input placeholder="代码" v-model="newCode" :maxlength="3">
          <template slot="prepend">000</template>
        </el-input>
      </div>
      <div>
        名称：
        <el-input placeholder="名称" v-model="newName"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleAddAbroad">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog class="update-dialog" title="修改境外区域" :visible.sync="showEditDialog" width="30%">
      <div>
        代码：
        <el-input placeholder="代码" v-model="newCode" :maxlength="6">
        </el-input>
      </div>
      <div>
        名称：
        <el-input placeholder="名称" v-model="newName"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showEditDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdateAbroad">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
    </div>
</template>
<script>
import { Table, TableColumn, Input, Button, Pagination, Dialog } from 'element-ui';
import {
  getAbroadList,
  addAbroad,
  deleteAbroad,
  updateAbroad
} from '@/api/area.js';
export default {
  name: 'abroad',
  components: {
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Input.name]: Input,
    [Button.name]: Button,
    [Pagination.name]: Pagination,
    [Dialog.name]: Dialog
  },
  data () {
    return {
      pageNum: 1,
      pageSize: 10,
      pageTotal: 0,
      searchWord: null,
      list: [],
      showAddDialog: false,
      showEditDialog: false,
      newCode: null,
      newName: null,
      currentAbroadId: null
    }
  },
  methods: {
    refreshList () {
      getAbroadList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        searchWord: this.searchWord
      }).then(res => {
        this.list = res.list;
        this.list.forEach((item, index) => item.index = index + 1);
        this.pageTotal = res.total;
      }).catch(errMsg => this.$alert(errMsg.msg))
    },
    changePageNum (pageNum) {
      this.pageNum = pageNum;
      this.refreshList();
    },
    handleAddAbroad () {
      addAbroad({
        code: '000' + this.newCode,
        name: this.newName
      }).then(res => {
        this.showAddDialog = false;
        this.newCode = null;
        this.newName = null;
        this.refreshList();
      }).catch(errMsg => this.$alert(errMsg.msg))
    },
    clickUpdateBtn (index, row) {
      this.newCode = row.code;
      this.newName = row.name;
      this.currentAbroadId = row.id;
      this.showEditDialog = true;
    },
    handleUpdateAbroad () {
      updateAbroad({
        id: this.currentAbroadId,
        code: this.newCode,
        name: this.newName
      }).then(res => {
        this.newCode = null;
        this.newName = null;
        this.currentAbroadId = null;
        this.showEditDialog = false;
        this.refreshList();
      }).catch(errMsg => this.$alert(errMsg.msg))
    },
    handleDeleteAbroad (index, row) {
      this.$confirm('确认删除？', '提示', {
        type: 'warning'
      }).then(() => {
        deleteAbroad(row.id)
          .then(res => this.refreshList())
          .catch(errMsg => this.$alert(errMsg.msg))
      }).catch(() => { })
    }
  },
  mounted () {
    this.refreshList();
  }
}
</script>
<style lang="stylus" scoped>
.abroad {
  padding-top: 20px;
  padding-left: 20px;

  .add-row {
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .search-input {
    width: 250px;
    margin-right: 5px;
  }

  .add-dialog {
    .el-input {
      width: 200px;
      margin-bottom: 10px;
    }
  }

  .update-dialog {
    .el-input {
      width: 200px;
      margin-bottom: 10px;
    }
  }
}
</style>